Priyayi Alit blogger Karawang: Tips bloging

Tampilkan postingan dengan label Tips bloging. Tampilkan semua postingan

Membuat Spoiler

Spoiler berguna untuk menyembunyikan sebagian atau seluruh postingan dan untuk menghemat space halaman posting. Spoiler bisa digunakan untuk menyembunyikan teks, gambar, kode html atau apa pun.

Berikut kode spoiler saya :

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler teks</b></i>:
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = '';
this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')
[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px;
width: 55px;" type="button" value="Show" />
</div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler
</div></div></div>

Contoh hasilnya :

Contoh spoiler teks:

Apabila ingin menggunakan gambar, maka ganti teks dengan kode gambar.

Contoh kode gambar :

<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrGfpcE4r1_t4EmWX492s_CdmSk1RlvxUHVFwr7PKkBsVzxd9tE1_AGVY4M3xj4QQ-3A-xqH2T1QHSxtkQ96YRPQQhcwp1rHDq1PWEMSjATxPzuntHjonGOKuvdhpme5HLXebLu-zxAM/s1600/aspire3.jpg" />
</div>

Maka kode spoiler di atas menjadi :

<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler gambar</b></i>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')
[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; 
padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrGfpcE4r1_t4EmWX492s_CdmSk1RlvxUHVFwr7PKkBsVzxd9tE1_AGVY4M3xj4QQ-3A-xqH2T1QHSxtkQ96YRPQQhcwp1rHDq1PWEMSjATxPzuntHjonGOKuvdhpme5HLXebLu-zxAM/s1600/aspire3.jpg" />
</div>
</div></div></div>

Contoh hasilnya :

Contoh spoiler gambar:

Membuat Image Slider

Slideshow yang sering dilihat dibawah header atau sering disebut image slider banyak sekali menghiasi halaman pada sebuah blog. Sekarang ini banyak sekali template blogger yang bagus dan dihiasi dengan berbagai macam slider yang tujuannya untuk memperindah tampilan.

Berikut merupakan salah satu cara membuat image slider berdasarkan kategori tertentu, dengan tidak perlu lagi memasukkan satu persatu keterangan dalam slider, jadi tinggal mengganti dengan kategori atau label yang ingin ditampilkan dalam slider.

Berikut langkah-langkahnya

Langkah Pertama

Login ke blogger dengan akun anda
Kemudian klik Tata Letak > pilih Edit HTML centang expand widget templates
Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>

#featured{margin-bottom:8px}
.sliderwrapper{position: relative;overflow: hidden;height: 240px}
.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
.pagination{text-align: left;padding:8px 0px}
.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
.featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:12px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

Langkah Kedua

Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>

<script>
//<![CDATA[
/* Script from:http://xxxxxx.blogspot.com/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1WR7Cflkj0mVbwPMYBf-vY2fq0zZNxuGH7jbINqBB2Gwkcsy7QGRQ-Cgor0Rx2Q9QKBXiZdPw8CyOFI7Vp8UZ0gGmtrksRlGNS2RQBK5x8jbiNEJufa3pNChcP4k_7jJCm_2A4HmxWqk/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 = 5;

label1 = "kesehatan";

function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="370" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
//]]>
</script>
Perhatikan kode yang diberi huruf tebal label1 = "kesehatan"; itu adalah label atau kategori yang akan ditampilkan di slider, disini saya memilih label misteri. Anda nanti tinggal mengganti dengan label yang diinginkan. Perhatikan juga kode img width="370" height="240" itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan template Anda.
Setelah itu, letakkan kode di bawah ini sebelum kode </body> (letakkan diatasnya saja)

<script src='http://xxxxx'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
//]]>
</script>
Langkah terakhir, yaitu untuk memanggil agar slider tersebut tampil di halaman depan anda cari kode <div id='main-wrapper'> jika anda ingin slider tampil di atas main-wrapper, dan letakkan kode berikut di bawahnya :

<b:if cond='data:blog.pageType == "index"'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>
Langkah terakhir Save/simpan template, membuat slider image berdasarkan kategori tertentu sudah selesai.

Semoga bermanfaat

Taskbar navigation menu

Berikut merupakan tutorial sederhana membuat navigation bar berbentuk taskbar horizontal yang stylish seperti taskbar yang ada di bawah pada blog ini. Tampilan taskbar navigation menggunakan kombinasi transparansi dan gradien color sehingga memberikan tampilan efek kaca seperti taskbar di Win7. Taskbar navigation ini dapat menjadi daya tarik tersendiri bagi pengunjung blogger, selain merapikan menu-menu utama pada halaman blog, taskbar ini dapat digunakan untuk memberikan kemudahan me-navigasikan blog..

Login ke blog sobat dan jangan lupa untuk mem-backup template blog terlebih dahulu.
Klik Dashboard > Design > Edit HTML.
Cari kode </Head> pada template blog (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian di browser untuk mempercepat pencarian).
Copy kode berikut ini tepat diatas kode </Head>.


<style>
#taskbar {
background: url() bottom repeat-x;
width: 100%;
height: 34px;
clear: both;
bottom: 0;
position: fixed;
font-family:arial;
text-decoration: none;
color: #FFFCFC;
background: #;
font-weight:bold;
font-size:13px;
overflow:hidden;
-moz-border-radius-topright: 8px;-webkit-border-top-right-radius: 8px;border-top-right-radius:8px;
-moz-border-radius-topleft: 8px;-webkit-border-top-left-radius: 8px;border-top-left-radius:8px;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#619bb9;
background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));
}
#taskbar a {
text-decoration:none;
color:white;
}
#icon-box {
text-align: left;
color:white;
position:fixed;
left: 10px;
bottom: 3px;
}

#icon-box a:hover img {
border: 1px solid #ffffff;
bottom: 2px;
}

#icon-box a:hover{
color: #666666;
}

#welcome-box {
text-align: center;
color:white;
font-weight:bold;
font-size:13px;
font-family:arial;
text-decoration: none;
position:fixed;
bottom: 8px;
left:160px;
right:200px;
width:auto;
}
</style>


Pada kode CSS #Welcome-Box yang berwarna biru silakan disesuaikan ukurannya biar tampilannya sesuai dengan template.

left:160px;
right:200px;
width:auto;
Cari kode </Body> kemudian copy kode berikut ini tepat diatas kode </Body>.


<div id='taskbar'>
<div align='right' style='padding:0;'>
<table><tr valign='midlle'>
<td>

© Copyright 2010 <a href='http://monozcore.blogspot.com' target='blank'><data:blog.title/></a>

</td>
<td>

<script src='http://localtimes.info/clock.php?cp3_Hex=FFB200&cp2_Hex=000000&cp1_Hex=FFFCFC&fwdt=96&ham=0&hbg=1&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&continent=Asia&country=Indonesia&city=Jakarta&widget_number=1000' type='text/javascript'/>

</td></tr></table></div>
</div>

<div id='icon-box'>
<a href='Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJwmDfMfwH1Fb2QgI51ZrWHAEsCaU1MhIpXFB1rMKhe9Djj2Aupt3BOfG9LjTLqgjlhl7Af4o2w0lrn32T1Bo4CQRJO7j3ndF6YGNEZ66N1nWzyiArJ5c-LP3Vq46lBbIHZdq0dgAdFqU/s800/backtotop.png'/></a>
<a href='Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignZeD0Jtg7CgQFz9GASruva8jXgxZONmZ3Du0YfLCg38Xa7JNcE2d9ezzOFbwJqsHXGuy-k1lUi8GNVty6x3EImXesI3oG56M7hTMfTQVDCa-1mOc8tdpeHEBnv3bAUi0erQ3CJW8ez4/s800/Winamp-1.png'/></a>
<a href='Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQbm23P2l0I4ySbLAA_kXDA8HI0tUUmN4hKHHC7X9h-nn9SE7k2M3ARDseUzsyjgWi2nGlRjCE61sF_Jk8_irQgEUnkcWEH75XWAhllpSiFNBHTQOjIcOQlg-lofzZn73t3_QgOE-I-6A/s800/chat24.png'/></a>
<a href='Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJYebJr6A8NP9WaOz1gksBA7SmKMWM8Nvy0HmSnw8tAKcTnyyUFWowt439izeI-zCraavzM4UvY9tScv2pAis90uZTGwH7R4AIRGz3t3aNhrLkskRSFVMGm2UTLAZRXkijsj2K1Lsnl-A/s800/fb_logo24.png'/></a>
<a href='http://www.docs.google.com' onclick='NewWindow(this.href,'Google Office','925','700','yes','center');return false' onfocus='this.blur()' title='Google Office'><img src='http://lh5.ggpht.com/_mFe4nvV0PXc/TOteuTF4SuI/AAAAAAAAAYI/4q8zN7mGn-k/s800/google_docs.png'/></a>


<div id='welcome-box'>
<marquee direction='left'>Welcome to <data:blog.title/></marquee>
</div>

</div>
Silakan di simpan dan lihat hasilnya.

Kode CSS taskbar navigation ini silakan disesuaikan terlebih dahulu baik ukuran, warna, icon dan jumlan quick-link agar sesuai dengan template.

Selamat mencoba

Membuat kotak komentar

Kotak komentar merupakan salah satu eleen yang ada di blog untuk mengetahui tanggapan, kritikan ataupun komentar dari pengunjung tentang konten suatu blog yang sedang di lihat.

Trik berikut menggabungkan kotak komentar facebook dan komentar blog. Penggunaan komentar di pisahkan dengan cara membuat tab komentar untuk memudahkan pengunjung memilih kotak komentar yang sesuai dengan apa yang pengunjung inginkan.

Berikut cara membuatnya :
1. Login ke Blog
2. Pilih "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates"
3. Copy-paste kode berikut ini di dalam kode <Html>.

xmlns:fb='http://ogp.me/ns/fb#'

Contoh :
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>

Pasang kode meta-tag berikut ini dan taruh di bawah kode <Html>.

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' property='og:site_name'/>
<meta content='./favicon.ico' property='og:image'/>
<meta content='App ID Facebook Sobat' property='fb:app_id'/>
<meta content='ID Facebook Sobat disini' property='fb:admins'/>
<meta content='article' property='og:type'/>

Apabila sobat belum menggunakan kode JQuery silakan copy kode JQuery berikut dan taruh di atas kode </Head> pada template blog. Jika sudah ada kode JQuery di blognya silakan lewati langkah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/>

Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.

<style>
.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
</style>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Kunjungi situs Facebook kemudian login ke akun facebook
Masuk ke Facebook Developper untuk mendapatkan kode script facebook comment.
Klik "Get Code" untuk menampilkan kode script facebook comment.

- Langsung klik "Get Code" saja, untuk mendapatkan parameter App ID Facebook.

- Terlihat pada gambar di atas terdapat dua kotak kode script.
Copy kode script pada kotak pertama kemudian simpan sementara menggunakan notepad. Hal ini dilakukan untuk mendapatkan App ID Facebook.

Contoh :
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=198573203529943";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Perhatikan teks angka yang berwarna merah, teks tersebut merupakan kode untuk App ID Facebook Sobat. Gunakan angka tersebut sebagai App ID Facebook yang akan digunakan pada beberapa kode script.
Sekarang kita akan mengambil kode ID Facebook Sobat, caranya masuk ke akun facebook sobat kemudian lihat di kotak address bar browser yang ada di atas.

Contoh :
https://www.facebook.com/tokocantikque

Pada teks yang berwarna merah terdapat Nama atau Angka dibelakang Alamat Facebook, itulah ID Facebook Sobat. Gunakan ID tersebut untuk digunakan sebagai kode ID Facebook.
Copy-paste kode di bawah ini dan taruh di bawah <Body> pada kode HTML template blog

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'App ID Facebook Sobat',
channelUrl : '<data:blog.url/>',
status : true,
cookie : true,
xfbml : true
});
// Additional initialization code here

};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>

Gunakan App ID Facebook yang tadi sudah sobat dapatkan.
Copy-paste kode di bawah ini dan taruh di bawah <div class='comments' id='comments'> atau kode yang mirip dengan kode <div class='comments' id='comments'> pada kode HTML template blog sobat.

<div style='margin-left:20px;'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png' style='vertical-align:top;'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://lh4.googleusercontent.com/-hq1JcDFnlFY/T1h53RSuHqI/AAAAAAAABV0/XOyCtVQYLVU/s800/blog-icon.jpg' style='vertical-align:top;'/> <data:post.numComments/> Comments
</div></div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page' style='margin:10px 20px 10px 20px;'>
<b:if cond='data:blog.pageType == "item"'>
<fb:comments colorscheme='dark' data-num-posts='10' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' notify='true' width='575'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
- Kode margin-left:20px; merupakan pergeseran tab dari kanan sebesar 20px.
- Kode margin:10px 20px 10px 20px; merupakan pergesaran kotak komentar facebook dari tab komentar sebesar atas 10px, kanan 20px, bawah 10px dan kiri 20px.
- Kode width='575' merupakan dimensi lebar kotak komentar facebook.
Klik "Save" dan lihat hasilnya...

Catatan :

Trik Membuat Kotak Komentar Blog & Facebook pada postingan artikel ini sudah dilengkapi dengan beberapa fitur, antara lain :

Banyaknya jumlah komentar yang ada pada komentar facebook dan komentar blog.
Menggunakan sistem Tab untuk memisahkan antara komentar facebook dengan komentar blog.
Pada komentar facebook dilengkapi dengan notifikasi pesan, jadi apabila ada komentar baru yang diketik melalui kotak komentar facebook bisa langsung diketahui melalui akun facebook sobat atau bisa langsung dicek di http://developers.facebook.com/tools/comments.

Selamat mencoba

Cara Membuat Slide Show View Image/Foto

Cara Membuat Slide Show View Image/Foto Seperti DETIK Sangat mudah dan bisa di praktikan langsung bahkan oleh blogger pemula. Tips ini adalah hasil utak-atik kang salman mudah-mudahan nanti bermanfaat. Sebelum memulai kita bahas apa sih slide show image ini ? Merupakan sebuah widget yang menampilkan image secara rondom. Dimana akan berganti-ganti tergantung jumlah foto dan informasi yang kita masukan ke dalamnya.

Widget ini memiliki tampilan yang berbeda dengan dari widget slideshow sebelumnya sebab telah sedikit kang salman modifikasi khususnya efek JQuery accordionnya.

Sebelumnya kang salman pernah membuat tutorial yang serupa dengan ini, namun karena server mengali eror sejak 2 hari lalu dan muncul kelulahan dari penikmat widget ini. Dan akhirnya kang salman melakukan update dan pembaruan widget slideshow foto yang mirip dengan okezone dan detik, update dan renovasi widget ini cukup menyita waktu selama 4 Jam, namun kang salman yakin widget ini lebih mudah pengunaannya dari pada yang sebelumnya.

Versi Baru, 22 Agustus 2010

Fitur Baru :
- Tidak membebani loading blog, dan tampil lebih 2 kali lebih cepat dari versi sebelumnya.
- Slide show yang di tampilkan lebih ciamik dan memberi warna baru pada blog anda
- Deskripsi text berada di atas foto.
- Durasi Tayang atau slide show foto. kini dapat anda setting sendiri sesuai dengan kebutuhan, Tips terkait ada di akhir artikel ini.

Langsung Aja kita simak Cara Membuat Slide show Berita foto Seperti Detik versi 2 ini.

Langkah 1

1. Login ke Blogger
2. Pilih Tata Letak / Rancangan
3. Pilih Tab Edit HTML
4. Centang "Expand Template Widget"
5. Silakan Cari Kode ]]></b:skin> dan Taruh Kode Berikut Di atas kode ]]></b:skin>

/* Image Slideshow */
#s3slider{margin-bottom:5px; width:100%; /* important to be same as image width */height:250px; /* important to be same as image height */position:relative; /* important */word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
#s3sliderContent{width:100%; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */}
.s3sliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */}
.s3sliderImage span{position:absolute; /* important */left:0; font:normal 11px 'Arial',Helvetica,sans-serif; padding:10px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); /* here you can set the opacity of box with text */-moz-opacity:0.7; /* here you can set the opacity of box with text */-khtml-opacity:0.7; /* here you can set the opacity of box with text */opacity:0.7; /* here you can set the opacity of box with text */color:#fff; display:none; /* important */top:0; /*if you puttop:0; ->the box with text will be shown at the top of the imageif you putbottom:0; ->the box with text will be shown at the bottom of the image*/}

6. Kemudian Setelah itu coba cari kode </head> dan Taruh Kode berikut, di atas kode </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var cssdropdown={disappeardelay:250,dropdownindicator:'<img src="http://img40.imageshack.us/img40/6613/arrowto.gif" border="0" />',enablereveal:[true,8],enableiframeshim:1,dropmenuobj:null,asscmenuitem:null,domsupport:document.all||document.getElementById,standardbody:null,iframeshimadded:false,revealtimers:{},getposOffset:function(d,c){var b=(c=="left")?d.offsetLeft:d.offsetTop;var a=d.offsetParent;while(a!=null){b=(c=="left")?b+a.offsetLeft:b+a.offsetTop;a=a.offsetParent}return b},css:function(b,a,c){var d=new RegExp("(^|\\s+)"+a+"($|\\s+)","ig");if(c=="check"){return d.test(b.className)}else{if(c=="remove"){b.className=b.className.replace(d,"")}else{if(c=="add"&&!d.test(b.className)){b.className+=" "+a}}}},showmenu:function(b,a){if(this.enablereveal[0]){if(!b._trueheight||b._trueheight<10){b._trueheight=b.offsetHeight}clearTimeout(this.revealtimers[b.id]);b.style.height=b._curheight=0;b.style.overflow="hidden";b.style.visibility="visible";this.revealtimers[b.id]=setInterval(function(){cssdropdown.revealmenu(b)},10)}else{b.style.visibility="visible"}this.css(this.asscmenuitem,"selected","add")},revealmenu:function(f,d){var e=f._curheight,b=f._trueheight,a=this.enablereveal[1];if(e<b){var c=Math.min(e,b);f.style.height=c+"px";f._curheight=c+Math.round((b-c)/a)+1}else{f.style.height="auto";f.style.overflow="hidden";clearInterval(this.revealtimers[f.id])}},clearbrowseredge:function(f,d){var c=0;if(d=="rightedge"){var e=document.all&&!window.opera?this.standardbody.scrollLeft+this.standardbody.clientWidth-15:window.pageXOffset+window.innerWidth-15;var b=this.dropmenuobj.offsetWidth;if(e-this.dropmenuobj.x<b){c=b-f.offsetWidth}}else{var a=document.all&&!window.opera?this.standardbody.scrollTop:window.pageYOffset;var e=document.all&&!window.opera?this.standardbody.scrollTop+this.standardbody.clientHeight-15:window.pageYOffset+window.innerHeight-18;var g=this.dropmenuobj._trueheight;if(e-this.dropmenuobj.y<g){c=g+f.offsetHeight;if((this.dropmenuobj.y-a)<g){c=this.dropmenuobj.y+f.offsetHeight-a}}}return c},dropit:function(c,b,a){if(this.dropmenuobj!=null){this.hidemenu()}this.clearhidemenu();this.dropmenuobj=document.getElementById(a);this.asscmenuitem=c;this.showmenu(this.dropmenuobj,b);this.dropmenuobj.x=this.getposOffset(c,"left");this.dropmenuobj.y=this.getposOffset(c,"top");this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(c,"rightedge")+"px";this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(c,"bottomedge")+c.offsetHeight+1+"px";this.positionshim()},positionshim:function(){if(this.iframeshimadded){if(this.dropmenuobj.style.visibility=="visible"){this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px";this.shimobject.style.height=this.dropmenuobj._trueheight+"px";this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px";this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px";this.shimobject.style.display="block"}}},hideshim:function(){if(this.iframeshimadded){this.shimobject.style.display="none"}},isContained:function(a,b){var b=window.event||b;var d=b.relatedTarget||((b.type=="mouseover")?b.fromElement:b.toElement);while(d&&d!=a){try{d=d.parentNode}catch(b){d=a}}if(d==a){return true}else{return false}},dynamichide:function(a,b){if(!this.isContained(a,b)){this.delayhidemenu()}},delayhidemenu:function(){this.delayhide=setTimeout("cssdropdown.hidemenu()",this.disappeardelay)},hidemenu:function(){this.css(this.asscmenuitem,"selected","remove");this.dropmenuobj.style.visibility="hidden";this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px";this.hideshim()},clearhidemenu:function(){if(this.delayhide!="undefined"){clearTimeout(this.delayhide)}},addEvent:function(b,c,a){if(b.addEventListener){b.addEventListener(a,c,false)}else{if(b.attachEvent){b.attachEvent("on"+a,function(){return c.call(b,window.event)})}}},startchrome:function(){if(!this.domsupport){return}this.standardbody=(document.compatMode=="CSS1Compat")?document.documentElement:document.body;for(var d=0;d<arguments.length;d++){var g=document.getElementById(arguments[d]).getElementsByTagName("a");for(var b=0;b<g.length;b++){if(g[b].getAttribute("rel")){var a=g[b].getAttribute("rel");var c=document.getElementById(a);this.addEvent(c,function(){cssdropdown.clearhidemenu()},"mouseover");this.addEvent(c,function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(c,function(){cssdropdown.delayhidemenu()},"click");try{g[b].innerHTML=g[b].innerHTML+" "+this.dropdownindicator}catch(f){}this.addEvent(g[b],function(i){if(!cssdropdown.isContained(this,i)){var h=window.event||i;cssdropdown.dropit(this,h,this.getAttribute("rel"))}},"mouseover");this.addEvent(g[b],function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(g[b],function(){cssdropdown.delayhidemenu()},"click")}}}if(this.enableiframeshim&&document.all&&!window.XDomainRequest&&!this.iframeshimadded){document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>');this.shimobject=document.getElementById("iframeshim");this.shimobject.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";this.iframeshimadded=true}}};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.s3Slider=function(h){var e=this;var l=(h.timeOut!=undefined)?h.timeOut:4000;var g=null;var d=null;var k=true;var f=false;var i=a("#"+e[0].id+"Content ."+e[0].id+"Image");var b=a("#"+e[0].id+"Content ."+e[0].id+"Image span");i.each(function(m){a(i[m]).mouseover(function(){f=true});a(i[m]).mouseout(function(){f=false;c(true)})});var c=function(m){var n=(m)?(l/2):l;n=(k)?10:n;if(i.length>0){d=setTimeout(j,n)}else{console.log("Poof..")}};var j=function(){g=(g!=null)?g:i[(i.length-1)];var m=jQuery.inArray(g,i)+1;m=(m==i.length)?0:(m-1);var n=a(e).width()*m;if(k==true){if(!f){a(i[m]).fadeIn((l/6),function(){if(a(b[m]).css("bottom")==0){a(b[m]).slideUp((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}else{a(b[m]).slideDown((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}})}}else{if(!f){if(a(b[m]).css("bottom")==0){a(b[m]).slideDown((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}else{a(b[m]).slideUp((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}}}};j()}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
   $('#s3slider').s3Slider({
      timeOut: 3000
   });
});
</script>

7. Save Template

Langkah 2
Untuk Bisa Menikmati widget ini silakan perhatikan instruksi di bawah ini :

1. Login ke Blogger
2. Pilih Tata Letak Atau Rancangan
3. Pilih Tab Edit HTML
4. Jangan Lupa Untuk buat Backupa data anda
5. Centang expand template widget
6. Cari Kode ini <div id='main-wrapper'>
Tekan Ctrl+F untuk mempermudahnya
7. Copy kode di bawah ini dan Paste tepat di bawah kode <div id='main-wrapper'>

<b:if cond='data:blog.pageType != "item"'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>
<img height='245'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3jtd-UVAb1vSBjctl1wAQbafMx04RxDIOWRRG1arK_6Ma3kxG-MDcPTA7Qy0yKbujDD0kRpcmm5HTrmMG2cgLsF3YX4xYnZMA1BCxozhuiCHq9vIhv9irVnxIbkv-neCcKAMTsqxtnW_8/s1600/1.jpg'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image akhiri dengan titik.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

</ul>

</div>

</b:if>

Keterangan :

Ganti warna merah dengan alamat link artikel kamu
Ganti warna hijau dengan link gambar / foto
Arti kode width="468" height="245" adalah ukuran dari widget slideshow view, lebar="468" tinggi="245" (atur sesuai ukuran widget yang kamu inginkan)
<span>Isi dengan kalimat yang ingin di tampilkan di atas foto.</span>
Jumlah Slide Show bisa anda perbanyak dengan menambahkan kode <li><a href="#"><img height='245' src="#" width='468'/> <span>isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image jangan lupa akhiri dengan titil atau tanda kalimat lainnya .</span></a></li> di atas kode </ul>

Lihat Contoh yang kang salman buat di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3jtd-UVAb1vSBjctl1wAQbafMx04RxDIOWRRG1arK_6Ma3kxG-MDcPTA7Qy0yKbujDD0kRpcmm5HTrmMG2cgLsF3YX4xYnZMA1BCxozhuiCHq9vIhv9irVnxIbkv-neCcKAMTsqxtnW_8/s1600/1.jpg' width='450'/>
<span>Bagaimanakah tanda perempuan menyukai kita? hal ini selalu jadi pertanyaan setiap cowok yang ntah itu dia ke GR-an atau dia yang benar-benar mengharapkan cinta dan jawaban dari si Doi, inilah 10 tanda khusus tanda cewek ada suka ma kita</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/8-pedomoan-merayu-istri.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGvRwYcsutA-dVth-CMahSSRFH1qemjeSuUKchWufbTcFbT6WxiNoaijt7wk83xXbwJ5lLSWLzt0oSvscR70CdlBda-zXvxwEl5_QfcAlrFiwOcy_Nxc1NnA8BhS91kxCuYUVaNVuYdem/s1600/2.jpg' width='450'/>
<span>8 pedoman merayu istri. Mendidik istri adalah tugas seorang suami namun terkadang kita sendiri tidak tau bagaimana cara mendidik istri dengan merayu atau menggodanya, berikut ini anjuran menurut islam cara mendidik istri.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2009/12/5-tips-dan-rahasia-mempercepat-internet.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipstylqgXfTveLQMg1VB6oVNcTkBSS-ceazc54QrPk30lGA0DWsRIzL2bZVnIKDXhSxnkbp3Vhi9J6RG5pKsbDK1kZfSn9iHyjf3_mqs1EguO4en01M7ciqKATyzZxTp4Ecz8Oz8oNkAXd/s1600/3.jpg' width='450'/>
<span>5 Tips Rahasia Mempercepat Internet. Anda merasa kecepatan internet lambat? temukan penyebabnya disini dan cari tau bagaimana solusinya.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/membuat-slideshow-berita-foto-seperti.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn46Lb4oH_SfGEdJOSR4G2UCx1Fqv4n4q5s9RdNxe9pS5bryD4G3GGGu19xekT1SPlKsdgrLBrBlzCf85Eiw_c3rfdvQUHPHM41ZJcBCzyo6pqWElSI4mvgRwHvTX3cKkBT0D5XQO5SYZI/s1600/4.jpg' width='450'/>
<span>http://www.kucoba.com adalah sebuah blog yang didirikan untuk mendukung program pengembangan sumber daya perblogkan melalui Blogger/Blogspot.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/06/inilah-cara-meningkatkan-jumlah.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyUeF8lRRcr3EdRbdWi63E5jzcTyitvqCeSrsKGiy9Y-Wba-v41FC35KQ0dNijdcUlzvfzaBFlAaEcJB2QhSQQWm__IlKmLhI6i6fqgxPlMPv0tXz7OwM6btgS7J5eSxn_Q2KNI_WJ2ng/s320/graph_summary_barchart.php+juni.png' width='450'/>
<span>Panduan mudah meningkatkan jumlah pengunjung dan dangan cara Cepat, mudah, dan gratis.</span></a></li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>

Hasil contoh di atas akan terlihat seperti di halaman Blog disto yang baru kang salman buat, Silakan Klik Disini

PENTING !! :

Untuk Mengubah Ukuran dan Lebar Slide Show Agar Fix Sesuai ukuran yang anda inginkan :

Sesuaikan width dan heigth dengan ukuran widget yang di ingin kan sesuai dengan ruang di sidebar blog atau posisi lainnya yang tersedia. untuk informasi lebih lanjut silakan lihat Keterangan di nomor tiga di atas. Dan untuk cara mengatur atau setting waktu slide show silakan anda cara kode timeOut: 3000

Ubah angka 3000 itu sesuai kebutuhan anda.

sumber : kucoba.com

Cara membuat tanggal otomatis dengan Javascript (Realtime)

Cara membuat tanggal otomatis dengan Javascript (Realtime) merupakan salah satu cara untuk mempercantik blog. Jika anda berkunjung ke priyayialit.blogspot.com pasti akan menemukan tanggal, hari dan yang lainnya sehingga dapat mengingatkan waktu ada berkunjung. Bagaimana cara membuatnya? Lalu apakah hal tersebut dalam diterapkan di blogspot? Tentu Bisa!

Tedapat 2 script yang dapat anda gunakan, yaitu bahasa inggris dan bahasa indonesia. dan tampilan keduanya seperti ini :

Contoh
Versi Inggris
Monday, 18 April, 2011

Versi Indonesia
Senin, 18 April, 2011

Penempatan kode :

Diletakkan dibawah <body> atau diatas </body>

Copy Paste kode xml berikut :

Versi Inggris

<script type='text/javascript'>
//<![CDATA[
/*
JavaScript Kit (http://www.javascriptkit.com/script/cut164.shtml)
*/
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<font color='000000' face='Arial'><b>"+dayarray[day]+", "+daym+" "+montharray[month]+", "+year+"</b></font>")
//]]>
</script>

Versi Indonesia

<script type='text/javascript'>
//<![CDATA[
/*
JavaScript Kit (http://www.javascriptkit.com/script/cut164.shtml)
*/
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu")
var montharray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember")
document.write("<font color='000000' face='Arial'><b>"+dayarray[day]+", "+daym+" "+montharray[month]+", "+year+"</b></font>")
//]]>
</script>

Jika anda sudah menentukan mana yang akan di pilih langkah selanjutnya adalah
Login ke Blogger > Rancangan > Pilih Add Widget > HTML Javascript
Pastekan ke sana lalu save.kan ke sana lalu save.

Cara membuat artikel terkait di blogspot

Membuat navigasi blog adalah hal penting untuk meningkatkan page view web/blog, salah satunya adalah Membuat link artikel terkait, artikel yang berhubungan, Related post atau nama lain yang berdasarkan kategori atau label yang diberikan tiap postingan.

Berikut ini tahap-tahap untuk menambahkan script Arttikel Terkait ke dalam Template Blog.

1. Login/masuk ke Blogger.com jika belum log in.

2. Pada halaman Dasboard masuk ke Layout ( tata-letak ), pilih tab Edit Html.

3. Kemudian tandai/centang kotak di samping tulisan “Expand Template Widget”

4. Setelah itu tempatkan script berikut ini di bawah tag ]]></b:skin>

5 Kemudian cari bagian ini, dan tambahkan seperti kode yang di beri warna

6. Sekarang cari kode baris post-footer berikut ini.

<div class='post-footer-line post-footer-line-3'>

kemudian masukan di bawahnya script ini.

<b:if cond='data:blog.pageType == "item"'>
<div class='related-posts'>
<h4>Posts Terkait:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Simpan Perubahan ( save template ).

Jika ingin memberi style atau gaya pada tampilan Widget Related Post ini. kita bisa menambahkan pada halaman Css-nya, script berikut, sebelum tag ]]></b:skin>

.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: ukuran font;
color: #nilai warna;
}

Untuk List

.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}
.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: ukuran font;}
.related-posts li a{color: #nilai warna}
.related-posts li a:hover{color: #nilai warna; text-decoration:none;}

Selamat Mencoba

Cara Membuat Background Blog Transparan

Asesoris blog yang satu ini dikhususkan bagi anda yang memiliki blog dengan latar belakang berupa image.Secara umum latar belakang image hanya tampil sebagian karena tertutup oleh warna latar dari outer wapper, main wrapper dan sidebar wrapper. Untuk mengatasi masalah tersebut anda harus sedikit menyamarkan latar yang menghalangi background berupa gambar tadi. Bisa juga dilakukan dengan menghapus warna latar belakang dari outer wapper, main wrapper dan sidebar wrapper, tapi hasilnya artilkel/postingan blog anda akan menjadi kurang jelas karena bersatu dengan gambar latar. Tutorial ini merupakan salah satu solusi bagi anda untuk menampilkan bayangan latar berupa gambar tetapi tidak terlalu mengganggu bagian lainnya dari blog.

Jika anda tertarik untuk menampilkannya, ikuti langkah-langkahnya :

1. Masuk ke Blogger.
2. Masuk ke Rancangan bagian Edit HTML.
3. Cari kode seperti dibawah ini :

    #outer-wrapper {
    width: 1000px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    background:black;
    }

    Tambahkan kode dibawah ini yang diletakkan dibawah kode diatas

    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 0.8;
    -khtml-opacity: 0.0;

    Jika digabungkan kodenya akan menjadi seperti dibawah ini :

    #outer-wrapper {
    width: 1000px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    background:black;
    filter: alpha(opacity=100);
    -moz-opacity: 1.8;
    opacity: 0.8;
    -khtml-opacity: 0.0;
    }

NB :
Angka berwarna biru merupakan ukuran yang digunakan oleh blog ini .Silakan anda ubah angka-angka tersebut. Semakin kecil angkanya, akan semakin semakin samar bagian outer wrapper blog anda.

4. Klik tombol Simpan Template.
5. Lihat perubahan blog anda.

Trik ini dapat juga anda terapka pada bagian lainnya dari blog anda.

Selamat Mencoba

Cara Merubah Background Blog dengan Image

Penampilan warna dari background blog dapat kita ubah sesuai dengan warna yang kita inginkan. Hanya saja perubahan background itu jangan sampai tulisan pada blog menjadi sulit dibaca oleh pengunjung.

Selain pengantian warna, background juga dapat anda ganti dengan image. Tentu saja image tersebut merupakan image yang anda sukai dan cocok untuk warna latar blog anda.

Berikut langkah-langkah Mengganti warna Background :

1. Sign ke Blogger.
2. Pilih Rancangan.
3. Pilih Edit HTML.
4. Back up dulu templatenya.
5. Cari kode seperti dibawah ini :

    body {
    background:$bgcolor;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

     Gantilah kode yang berwarna biru dengan kode warna yang anda inginkan.
     Misalnya warna biru tua kodenya : #000033.

6. Kode diatas setelah dimasukan kode warna akan menjadi seperti ini.

    body {
    background:#000033;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

7. Simpan Template dan Lihat blog anda sekarang.

Mengganti Background dengan Image.

Pertama, anda harus memiliki sebuah image yang akan dijadikan background blog anda. Ubah ukuran gambar menjadi besar (lebar=1704 pixel dan tingginya=886 pixel)
Uploadlah gambar tersebut ke tempat penyimpanan image. Copylah URL dari image tersebut.
Misalnya : http://img268.imageshack.us/img268/6805/bodybgiq.jpg

URL gambar diatas penampilannya seperti ini :

Setelah anda memiliki URL image, kembali pada langkah seperti cara diatas hingga sampai pada kode ini.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Tambahkan alamat URL tadi diujung kode yang berwarna biru. Jadinya seperti ini :

body {
background:#FFFFFF url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg?imgmax=100%) repeat-x fixed top center;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Gambar yang ditampilkan pada tips ini walaupun satu gambar akan memenuhi latar blog anda dengan syarat ukuran gambar harus besar (1704 pixel X 885 pixel)

Selamat Mencoba

Cara Merubah Background Blog

Pengaturan background sebuah blog dapat kita lakukan dengan mudah dengan syarat harus mengenal terlebih dahulu bagian-bagian dari blog.

Bagian-bagian tersebut diantaranya :

1. Body : bagian keseluruhan dari blog.
2. Outer Wrapper : bagian yang didalamnya terdapat : Main Wrapper dan Sidebar Wrapper.
3. Main Wrapper : tempat kita membuat postingan.
4. Sidebar Wrapper : tempat kita meletakan berbagai widget
5. Main Widget : bagian dalam dari main wrapper.
6. Sidebar widget : bagian dalam dari sidebar.

Setelah mengetahui bagian-bagian blog tersebut, selanjutnya tinggal mengganti warna sesuai dengan pilihan masing-masing.

Kode warna dapat anda lihat pada KODE WARNA VERSI 1 dan KODE WARNA VERSI 2

1. Pewarnaan pada bagian Body :

    body {
    background:#002E3F;
    margin:0;
    color:$textcolor;
    font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

    Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

2. Pewarnaan pada bagian Outer Wrapper :

    #outer-wrapper {
    width: 990px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    background:#1B703A;
    }

    Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

3. Pewarnaan pada bagian Main Wrapper :

    #main-wrapper {
    width: 470px;
    float: $startSide;
    background:#80FF00;
    border:5px solid
    backgroudcolor;white;
    padding:15px 15px .25em;
    word-wrap: break-word;
    overflow: hidden;
    }

    Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

4. Pewarnaan pada bagian Sidebar Wrapper :

    #sidebar-wrapper {
    width: 230px;
    float: $endSide;
    background:#78B749;
    border:0px solid $bordercolor;white;
    padding:5px 5px .25em;
    word-wrap: break-word;
    overflow: hidden;
    margin-bottom:0px;
    }

    Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

5. Pewarnaan pada bagian Main Widget :

    .main .widget{
    background:#CAF99B;
    border:px solid #cccccc;
    margin:0 0 0.5em;
    padding:;
    }

    Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

6. Pewarnaan pada bagian Sidebar Widget :

    .sidebar .widget{
    background:#CAF99B;
    border:2px solid #cccccc;
    margin:0 0 0.5em;
    padding:0.5em;
    }

    Perhatikan yang berwarna biru, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

Selamat Mencoba

Cara Membuat Form Contact Us/Hubungi Kami

Pengunjung blog terkadang ingin bertanya sesuatu tentang postingan yang anda tampilkan atau masalah lainnya yang berkaitan dengan blog anda.
Untuk itu anda sebagai pemilik blog harus menyediakan ruang bagi pengunjung untuk bertanya (apapun istilahnya) dalam bentuk ruang tersendiri yang biasa disebut Contact Us /Hubungi Kami.

Sebenarnya pengunjung bisa dsaja memberikan komentarnya pada kotak komentar, namun kadang-kadang isinya mungkin lebih bersifat pribadi/mengandung unsur rahasia. Maka solusinya anda harus membuat ruangan tersendiri dalam

"Form Contact Us/Hubungi Kami"

Berikut Langkah - langkah :

1. Kunjungi situs : http://kontactr.com
2. Klik Menu Signup untuk daftar di bagian kanan atas..
3. Isi kotak yang tersedia dengan data-data anda.
4. Klik tombol Signup setelah data anda lengkap.
5. Selanjutnya pihak kontactr akan mengirim email ke email anda pada waktu daftar tadi.
6. Buka email anda kemudian klik email dari kontact untuk melakukan activate account anda.
7. Pada halaman kontact muncul tulisan success dan tulisan :Your account has been activated successfully
     Click here to login to your account now. Klik .Click here untuk login.
8. Silahkan anda lakukan login dengan username dan password anda tadi.
9. Pada halaman berikutnya ada sript dibawah tulisan Ajax Embed Code. Copy script tersebut dan paste
      dihalaman post baru anda.
10. Jika ingin mengubah tampilan warna, klik Customize This Widget, silahkan anda atur tata warna yang
       anda inginkan.
11. Klik Terbitkan Entry setelah anda menambahkan kalimat-kalimat yang anda rasa perlu ditampilkan
       bersama Form Hubungi Kami (Contact Us)

Selamat Mencoba

Cara Membuat Kursor di ikuti Teks

Cara Membuat kursor di ikuti Teks, merupakan trik mempercantik blog berikutnya dmana kemanapun kursor akan gerakan, selalu ada teks yang dengan setia mengikutinya. Langsung saja coba triksnya !!!

Berikut langkah - langkahnya :

Sign ke Blogger.

Pilih Tata Letak, Edit HTML, HTML/JavaScript.

Copy seluruh kode dibawah ini dan paste pada kolom yang tersedia.

Klik Tombol Simpan.

Selesai.

Kode yang harus dicopy :
<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='Welcome to Priyayi Alit Blog'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------
var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>

NB :
kode yang bercetak biru dapat anda ganti sesuai keinginan dan keperluan anda

Selamat Mencoba

Bayi dan Anak

Pengetahuan

Membuat Spoiler

Membuat Image Slider

Taskbar navigation menu

Membuat kotak komentar

Cara Membuat Slide Show View Image/Foto

Untuk Mengubah Ukuran dan Lebar Slide Show Agar Fix Sesuai ukuran yang anda inginkan :

Ubah angka 3000 itu sesuai kebutuhan anda.

Cara membuat tanggal otomatis dengan Javascript (Realtime)

Cara membuat artikel terkait di blogspot

Cara Membuat Background Blog Transparan

Cara Merubah Background Blog dengan Image

Cara Merubah Background Blog

Cara Membuat Form Contact Us/Hubungi Kami

Cara Membuat Kursor di ikuti Teks

Sponsor

Cerita cerita lucu

Template Information

Karawang

More kode warna » ?max-results=10">Label 6

More kode warna » ?max-results=10">Label 11

More kode warna » ?max-results=10">Label 12

Tips bloging

Template Information

Test Footer 2

Bayi dan Anak

Pengetahuan

Untuk Mengubah Ukuran dan Lebar Slide Show Agar Fix Sesuai ukuran yang anda inginkan :

Ubah angka 3000 itu sesuai kebutuhan anda.

Sponsor

Cerita cerita lucu

Template Information

Karawang

More kode warna » var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60; ?max-results=10">Label 6

More kode warna » var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60; ?max-results=10">Label 11

More kode warna » var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60; ?max-results=10">Label 12

Tips bloging

Template Information

Test Footer 2

More kode warna » ?max-results=10">Label 6

More kode warna » ?max-results=10">Label 11

More kode warna » ?max-results=10">Label 12